<cdk-accordion class="example-accordion">
  @for (item of items; track item; let index = $index) {
  <cdk-accordion-item #accordionItem="cdkAccordionItem" class="example-accordion-item">
    <button
      class="example-accordion-item-header"
      (click)="accordionItem.toggle()"
      tabindex="0"
      [attr.id]="'accordion-header-' + index"
      [attr.aria-expanded]="accordionItem.expanded"
      [attr.aria-controls]="'accordion-body-' + index">
      {{ item }}
      <span class="example-accordion-item-description">
        Click to {{ accordionItem.expanded ? 'close' : 'open' }}
      </span>
    </button>
    @if(accordionItem.expanded) {
    <div
      class="example-accordion-item-body"
      role="region"
      [style.display]="accordionItem.expanded ? '' : 'none'"
      [attr.id]="'accordion-body-' + index"
      [attr.aria-labelledby]="'accordion-header-' + index"
    >
      Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum
      deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam
      rem tenetur deserunt velit culpa?
    </div>
    }
  </cdk-accordion-item>
  }
</cdk-accordion>
